<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>购物车</title>
        <style>
            table {
                border: 1px solid #e9e9e9;
                border-collapse: collapse;
                border-spacing: 0;
            }

            th,
            td {
                padding: 8px 16px;
                border: 1px solid #e9e9e9;
                text-align: left;
            }

            th {
                background-color: #f7f7f7;
                color: #5c6b77;
                font-weight: 600;
            }
        </style>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-if="goods.length">
                <table>
                    <thead>
                        <tr>
                            <th>商品名称</th>
                            <th>价格</th>
                            <th>购买数量</th>
                            <th>操作</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="(item, index) in goods ">
                            <td>{{item.name}}</td>
                            <td>{{item.price}}</td>

                            <td>
                                <button @click="decrement(item)">-</button>
                                {{item.num}}
                                <button @click="increment(item)">+</button>
                            </td>
                            <td>
                                <button @click="del(index)">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h3>
                    <span> 总价格:{{totalPrice}}</span>
                    <span>总数量:{{total}}</span>
                </h3>
            </div>
            <h3 v-else>购物车为空</h3>
        </div>
        <script>
            /*
            1.单个商品购买数量最少为0，最多无限制
            2.总价格和总数量要根据单个商品购买数量动态改变
            3.样式写好看点
            */
            const app = new Vue({
                el: "#app",
                data: {
                    goods: [
                        {
                            id: 1,
                            name: "iphonex",
                            price: 999.88,
                            num: 1,
                        },
                        {
                            id: 2,
                            name: "iphone6",
                            price: 8999.75,
                            num: 1,
                        },
                        {
                            id: 3,
                            name: "小米10",
                            price: 1323.15,
                            num: 1,
                        },
                        {
                            id: 4,
                            name: "iphone 14",
                            price: 1288.87,
                            num: 1,
                        },
                    ],
                },
                computed: {
                    // 总价
                    totalPrice() {
                        return this.goods
                            .reduce((prev, cur) => {
                                return prev + cur.num * cur.price;
                            }, 0)
                            .toFixed(2);
                    },
                    // 总数量
                    total() {
                        return this.goods.reduce((prev, cur) => {
                            return prev + cur.num;
                        }, 0);
                    },
                },
                methods: {
                    //增加
                    increment(item) {
                        item.num++;
                    },
                    //减少
                    decrement(item) {
                        item.num && item.num--;
                    },
                    //删除
                    del(idx) {
                        this.goods.splice(idx, 1);
                    },
                },
            });
        </script>
    </body>
</html>
